自定義元件的插槽

元件插槽的基本用法

• 對支援插槽的元件來說，也可以為插槽新增預設的內容，這樣當元件在使用時，如果沒有設定插槽內容，就會自動著色預設的內容，範例如下：

<div id="Application">
  <my-container></my-container>
</div>
<script>
    const App = Vue.createApp({
    })
    const containerComponent = {
        template:'<div style="border-style:solid;border-color:red; border-width:10px"><slot>插槽的預設內容</slot></div>'
    }
    App.component("my-container", containerComponent)
    App.mount("#Application")
</script>

• 注意，一旦元件在使用時設定了插槽的內容，預設的內容就不會再被著色。